<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-form-item label="人员姓名" class="row-padding-bottom">
            <el-input
              v-model="filterField.keyword"
              @blur="filterField.keyword = changeValue($event)"
              placeholder="请输入姓名或身份证号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <!-- <exportBtn v-if="!isShowAdd" :dataLen="tableData.length" :filterField="filterField" api="api-s/report/export_JC_CS_POVERTYEMPLOYEE"></exportBtn> -->
          </el-form-item>
          <!-- <el-form-item>
                        <exportBtn :dataLen="tableData.length" :filterField="filterField" api="api-s/report/export_JC_CS_POVERTYEMPLOYEE"></exportBtn>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="commonBut saveBtn funComBut" icon="icon iconfont icontianjia" @click="toAdd" v-show = "isShowAdd">
                            <span class="opetareText">添加贫困户</span>
                        </el-button>
                    </el-form-item> -->
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px" v-if="isShowAdd">
          <exportBtn
            :dataLen="tableData.length"
            :filterField="filterField"
            api="api-s/report/export_JC_CS_POVERTYEMPLOYEE"
          ></exportBtn>
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icontianjia"
            @click="toAdd"
          >
            <span class="opetareText">添加贫困户</span>
          </el-button>
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          @sort-change="sortChange"
          :data="tableData"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column align="center" prop="idcardPhoto" label="身份证照片">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.idcardPhoto"
                style="width: 50px; height: 50px; top: 3.5px"
                :src="scope.row.idcardPhoto"
                :preview-src-list="scope.row.idcardImgList"
              >
              </el-image>
              <el-image
                src="../../../static/img/employee/card.png"
                alt=""
                v-else
                style="width: 50px; height: 50px; top: 3.5px"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="姓名"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="idcard"
            label="身份证号"
            min-width="120"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.idcard | deseHandler(4, 4, '*') || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="sexValue"
            label="性别"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="nationalityValue"
            label="民族"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="inputDate"
            label="录入时间"
            sortable="custom"
            :formatter="formatTd"
            min-width="160"
          ></el-table-column>
          <el-table-column
            align="left"
            label="操作"
            width="100px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-show="isShowDetail"
                @click="seeDetail(scope.row.id)"
                >查看</el-link
              >
              <span v-show="!isShowDetail">--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <el-dialog
          title="添加贫困户"
          :visible.sync="formVisible"
          :close-on-click-modal="false"
          @close="closeDialog"
          custom-class="brand-dialog-min-width"
          width="640px"
          :modal-append-to-body="false"
          :append-to-body="true"
        >
          <el-form
            :model="formData"
            :rules="formRules"
            ref="formData"
            style="padding-top: 8px"
          >
            <el-form-item
              label="身份证号码："
              prop="idCard"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="formData.idCard"
                @input="changeSearch"
                autocomplete="off"
                placeholder="请输入身份证号码"
                class="mWidth"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名：" :label-width="formLabelWidth">
              <span id="currentName">{{ currentName || '--' }}</span>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="cancelEdit('formData')" class="cancel"
              >取消</el-button
            >
            <el-button
              type="primary"
              @click.native="savePoorInfo('formData')"
              class="save"
              :loading="isSaveLoading"
              >保存</el-button
            >
          </div>
        </el-dialog>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'poorHouseholds',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '贫困户',
      //表格数据
      tableData: [],
      requestUrl: 'api-e/cs/employee/expand/povertyEmployee',
      idcardImgList: [],
      //搜索条件
      filterField: {
        keyword: '', //姓名或身份证号
      },
      isShow: false, //列表加载
      loading: true,
      isSaveLoading: false, // 弹框保存loading
      formVisible: false, //添加贫困户弹框
      formLabelWidth: '125px',
      formData: {
        idCard: '',
      },
      formRules: {
        idCard: [
          {
            required: true,
            pattern:
              /^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
            message: '请输入正确的身份证号',
            trigger: 'blur',
          },
        ],
      },
      currentName: '',
      isShowDetail: '',
      isShowAdd: '',
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('poorHouseholds:detail') > -1
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('poorHouseholds:add') > -1
  },
  methods: {
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      } else {
        this.idcardImgList = []
        for (var i = 0; i < this.tableData.length; i++) {
          this.idcardImgList.push(this.tableData[i].idcardPhoto)
        }
        for (var i = 0; i < this.tableData.length; i++) {
          var container = this.idcardImgList
          var frontArr = container.slice(0, i)
          var behindArr = container.slice(i, this.tableData.length)
          var list = behindArr.concat(frontArr)
          this.tableData[i].idcardImgList = list
        }
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    toAdd() {
      this.formVisible = true
      this.currentName = ''
    },
    //关闭弹窗
    closeDialog() {
      this.$refs['formData'].resetFields()
    },
    // 弹框取消
    cancelEdit() {
      this.formVisible = false
      this.$refs['formData'].resetFields()
    },
    changeSearch() {
      //当身份证输入18位时掉接口
      this.currentName = ''
      var idCardLen = this.formData.idCard.length
      if (idCardLen === 18 || idCardLen === 15) {
        this.searchName()
      }
    },
    searchName() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/employee/expand/povertyEmployeeCard',
        data: {
          idcard: this.formData.idCard,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.currentName = response.data.result.name
            } else {
              this.$message({
                type: 'error',
                message: response.data.errorMsg,
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    savePoorInfo() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.submitFormAdd()
        } else {
          return false
        }
      })
    },
    submitFormAdd() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/employee/expand/addPovertyEmp',
        data: {
          idcard: this.formData.idCard,
        },
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            this.$refs['formData'].resetFields()
            this.formVisible = false
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isSaveLoading = false
        })
    },
    //查看详情
    seeDetail(employeeId) {
      this.$router.push({
        path: '/home/employee/employeeInfoC',
        name: 'employeeInfoC',
        query: {
          employeeId: employeeId,
          type: 'PQ',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enShiCustomRequirements/poorHouseholds',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  top: 198px;
  /deep/ .employeeAge .el-input__inner {
    width: 94px !important;
  }
}
@import '../../../static/css/filterArea.less';
</style>
